<template>
  <div class="site-chart-box-main">
    <van-nav-bar safe-area-inset-top placeholder :title="siteName" left-arrow fixed @click-left="onClickLeft" />
    <van-pull-refresh v-model="isLoading" :pulling-text="$t('PullingText')" :loosing-text="$t('PullingText')" :success-text="$t('refreshSuccee')" @refresh="onRefresh">
      <div class="selectBox">
        <!-- 年月日 -->
        <div class="sel" @click="showPicker2 = true">{{timeName}}</div>
        <van-popup v-model="showPicker2" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @cancel="showPicker2 = false"
            @confirm="onConfirm2"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
          />
        </van-popup>
        <!-- 年月选择框 -->
        <div class="sel" @click="showPicker3 = true" v-if="timeName==$t('Month')">{{timeVal}}</div>
        <van-popup v-model="showPicker3" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            @cancel="showPicker3 = false"
            @confirm="onConfirm3"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
          />
        </van-popup>
        <!-- 年选择框 -->
        <div class="sel" @click="showPicker4 = true" v-if="timeName==$t('Year')">{{value4}}</div>
        <van-popup v-model="showPicker4" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns4"
            @cancel="showPicker4 = false"
            @confirm="onConfirm4"
            :confirm-button-text="$t('OK')"
            :cancel-button-text="$t('Cancel')"
          />
        </van-popup>
      </div>
      <div class="box">
        <div id="powerChart" name="second" v-show="isLine"></div>
        <div id="myChart" v-show="!isLine"></div>
      </div>
      <div class="content" v-for="(record,i) in recordArr" :key="i">
        <div class="siteContentBox">
          <div class="siteContentList">
            <div class="siteContentList_l">Charge Energy</div>
            <div class="siteContentList_r">{{record.electric}}kW/h</div>
          </div>
          <div class="siteContentList">
            <div class="siteContentList_l">Duration</div>
            <div class="siteContentList_r">{{record.durationHour}}h {{record.durationMinute}}min</div>
          </div>
          <div class="siteContentList">
            <div class="siteContentList_l">Start Time</div>
            <div class="siteContentList_r">{{record.startTimeStr}}</div>
          </div>
          <div class="siteContentList">
            <div class="siteContentList_l">End Time</div>
            <div class="siteContentList_r">{{record.endTimeStr}}</div>
          </div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  data(){
    return {
      siteName:localStorage.getItem('siteName'),
      isLoading:false,
      recordArr:[],
      timeName: this.$t('Day'),
      timeNameCode:0,
      value4:(new Date()).getFullYear(),
      showPicker2: false,
      showPicker3: false,
      showPicker4: false,
      columns2: [this.$t('Day'),this.$t('Month'), this.$t('Year'),this.$t('AllYear')],
      currentDate:new Date(),
      timeVal:moment(new Date()).format('YYYY/MM'),
      columns4:this.getYear(),
      dataCurrent:[moment(new Date()).format('YYYY'),moment(new Date()).format('MM')],
      isLine:true,
      fifteenRefresh:null
    }
  },
  methods: {
    onClickLeft(){
      this.$router.push({path:'/chargerdetail'});
    },
    onConfirm2(value,index) {
      this.timeName = value;
      this.showPicker2 = false;
      this.timeNameCode=index+1;
      if(index==0){
        this.getPowerCharts();
        this.isLine=true;
      }else if(index==1){
        this.isLine=false;
        this.dataCurrent=this.timeVal.split("/");
        this.getYielCharts(this.timeNameCode,...this.dataCurrent);
      }else if(index==2){
        this.isLine=false;
        this.dataCurrent=[this.value4,moment(new Date()).format('MM')];
        this.getYielCharts(this.timeNameCode,...this.dataCurrent);
      }else if(index==3){
        this.isLine=false;
        this.dataCurrent=[moment(new Date()).format('YYYY'),moment(new Date()).format('MM')];
        this.getYielCharts(this.timeNameCode,...this.dataCurrent);
      }
    },
    onConfirm3(value) {
      this.showPicker3 = false;
      this.timeVal=moment(value).format('YYYY/MM');
      this.dataCurrent=this.timeVal.split("/");
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },
    onConfirm4(value) {
      this.showPicker4 = false;
      this.value4 = value;
      this.dataCurrent=[this.value4,moment(new Date()).format('MM')];
      this.getYielCharts(this.timeNameCode,...this.dataCurrent);
    },
    getYear(){
      let years=(new Date()).getFullYear()-2017;
      let yearsArr=[];
      for(let i=0;i<=years;i++){
        yearsArr.push(2017+i);
      }
      return yearsArr;
    },
    async getChargerecord(){
      this.comm.loadingShow();
      let datas=await this.API.getChargerecord(localStorage.getItem('domain'),
        {
        'tokenId':localStorage.getItem('tokenId'),
        'current':0,
        'size':5,
        'pileSn':localStorage.getItem('pileSn')
        });
      this.recordArr=datas.rows;
    },
    async getYielCharts(reportType,year,month){
      this.comm.loadingShow();
      let data=await this.API.getChargerYield(localStorage.getItem('domain'),
        {
          'tokenId':localStorage.getItem('tokenId'),
          'siteId':localStorage.getItem('siteId'),
          'pileSn':localStorage.getItem('pileSn'),
          'reportType':reportType,
          'year':year,
          'month':month,
          'webTime':moment(new Date()).format('YYYY,MM,DD')
        });
      this.switchChart(data.returnList);
    },
    switchChart(data){
      let [times,y1]=[[],[]];
      for(let i= 0;i<data.length;i++){
        times.push(data[i].abscissa);//横坐标
        y1.push((data[i].yield||0).toFixed(2));
      }
      let legend=['EV Charger Energy'];
      let color=['#F4B600'];
      let series=[
        {name: legend[0],type: 'bar',data: y1}
      ];
      console.log(y1);
      this.$nextTick(()=>{
        this.commChart.barChart('myChart',color,this.timeNameCode,times,legend,series);
      });
    },
    //获取功率
    async getPowerCharts(){
      this.comm.loadingShow();
      let data=await this.API.getChargerYield(localStorage.getItem('domain'),
        {'tokenId':localStorage.getItem('tokenId'),
        'siteId':localStorage.getItem('siteId'),
        'pileSn':localStorage.getItem('pileSn'),
        'reportType':1,
        'year':moment(new Date()).format('YYYY'),
        'month':moment(new Date()).format('MM'),
        'day':moment(new Date()).format('DD'),
        'webTime':moment(new Date()).format('YYYY,MM,DD')
        });
      let [times,chargerpower]=[[],[]];
      for(let i= 0;i<data.returnList.length;i++){
        let arrs=(data.returnList[i].timeStringVal).split(' ');
        arrs=arrs[arrs.length-1];
        arrs=arrs.split(":");
        arrs=arrs.slice(0,2);
        arrs=arrs.join(":");
        times.push(arrs);
        chargerpower.push(((data.returnList[i].power||0)).toFixed(1));
      }
      let legend=['EV Charger Power'];
      let series=[
        {name: legend[0],type: 'line',symbol: 'none',smooth: true,itemStyle: {normal: {color: '#F4B600'}},data: chargerpower}
      ];
      this.$nextTick(()=>{
        this.commChart.lineChart2('powerChart',times,legend,series);
      });
    },
    onRefresh(){
      this.isLoading=false;
      if(this.timeNameCode!=0){
        this.getYielCharts(this.timeNameCode,...this.dataCurrent);
      }else{
        this.getPowerCharts();
      }
    },
  },
  mounted(){
    this.getPowerCharts();
    this.getChargerecord();
    this.fifteenRefresh=setInterval(()=>{
      this.getPowerCharts();
      this.getChargerecord();
    },900000);
  },
  destroyed(){
    clearInterval(this.fifteenRefresh);
    this.fifteenRefresh=null;
  }
}
</script>

<style scoped lang="less">
.van-hairline--bottom::after{
  border: none;
}
.selectBox{
  width: 100%;
  display:flex;
  padding: 20px 0 10px 0;
}
.box{
  width: 100%;
  height: 280px;
  position: relative;
}
#myChart,#powerChart{
  position: absolute;
  top: 0;
  width: 100%;
  height: 280px;
  margin-bottom: 15px;
}
.content{
  width: 100%;
  margin: 5px 0;
  border-top:1px solid #EFEFEF;
  border-bottom:1px solid #EFEFEF;
  background: #ffffff;
  .siteContentBox{
    padding: 0 8px;
  }
  .siteContentList{
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .siteContentList_l{
    float: left;
    color: #B6B6B6;
  }
  .siteContentList_r{
    float: right;
    color: #444444;
  }
}
</style>
